<template>
  <div class="box">
    <h1>组件间通信: props</h1>
    <div>msg: {{ msg }}</div>
    <div>userinfo.name: {{ userinfo.name }}</div>
    <div>userinfo.age: {{ userinfo.age }}</div>



    <Child :msg="msg" :userinfo="userinfo" :changeUserinfo="changeUserinfo"></Child>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import Child from './Child.vue';

const msg = ref('臭葛晨')

const userinfo = ref({
  name: '葛晨',
  age: 24
})

const changeUserinfo = () => {
  userinfo.value = reactive({
    name: '葛二蛋',
    age: 66
  })
}

</script>
